<template>
	<view class="acticon">
		<view>
		<swiper 
		    class="home-swiper"
			indicator-dots="true" 
			autoplay="true" 
			circular="true"
		    interval="3000"
		    duration="1000"
		    indicator-color="#bfbfbf"
		    indicator-active-color="#00ACED"
		  >
		    <block v-for="(item,index) in info.mainImages" wx:key="item.info.mainImages">
		      <swiper-item>
		        <image :src="info.mainImages[index]" style="width: 100%;height: 100%;border-radius: 10px;"></image>
		      </swiper-item>
		    </block>
		  </swiper>
		  <view class="activct">
			  <span>{{info.title}}</span>
			  <view class="catu-cracon">品牌: &nbsp;{{info.attributes[0].value}}&nbsp; 产地&nbsp;{{info.attributes[1].value}}</view>
			  <span class="cate-yosp"  v-if='info.specs[2]'>￥{{min}}—{{max}}&nbsp;<span class="cate-acedc"><span class="caty-caend">价格</span>{{info.specs[active].costPrice}}</span></span>
			  <span class="cate-yosp"  v-else>￥{{info.specs[0].costPrice}}</span>
			  <!-- 规格按钮 -->
			  <view v-for="(item,index) in info.specs" :key="info.specs" class="cart-caecr" @click="change(index)"  :class="active==index ? 'active' : '' ">
			  	<van-button type="default" size="small">{{item.name}}</van-button>
			  </view>
			   <!-- 数量加减 -->
			   <view>
			   <span class="caty-iconsn">数量</span>
			   <van-stepper class="caty-opster" disable-input=true :value="add.number" v-module="add.number" integer button-size="24px" @plus="actehon()"  @minus="formula()"/>
			   </view> 
			    
				<!-- 商品详情 -->
				<view class="" v-if="images.length != 0">
					<view style="margin: 30rpx 30%; color: #ff7144;">
						<image src="https://xn-panda-test.oss-cn-hangzhou.aliyuncs.com/xiaochnegxu/you.png" mode="widthFix" style="width: 20px;transform: translateY(-4px); margin-right: 15rpx;"></image>
						商品详细
						<image src="https://xn-panda-test.oss-cn-hangzhou.aliyuncs.com/xiaochnegxu/zuo.png" mode="widthFix" style="width: 20px;transform: translateY(-4px); margin-left: 15rpx;"></image>
						</view>
					<view v-for="(item,index) in images" :key="index">
						<image :src="item.url" mode="widthFix" style="width: 100%;"></image>
					</view>
				</view>
			   
			   <!-- 检测报告 -->
			   <view class="" v-if="akget.length != 0">
			   <view style="margin: 30rpx 30%; color: #ff7144;">
			   	<image src="https://xn-panda-test.oss-cn-hangzhou.aliyuncs.com/xiaochnegxu/you.png" mode="widthFix" style="width: 20px;transform: translateY(-4px); margin-right: 15rpx;"></image>
			   	检测报告
			   	<image src="https://xn-panda-test.oss-cn-hangzhou.aliyuncs.com/xiaochnegxu/zuo.png" mode="widthFix" style="width: 20px;transform: translateY(-4px); margin-left: 15rpx;"></image>
			   	</view>
				<view class="aminagester" v-for="(item,index) in akget" :key="index">
					
					<image class="aminagester" :src="item.url" mode="widthFix"></image>
				</view>
			   </view>
			   <!-- 底部提示 -->
			  <image class="caty-imgper" src="../../static/tongcheng.png" mode=""></image>
			   <van-notice-bar
			   class="caty-notice"
			     wrapable
			     text="现货, 23:00前下单,预计明日送达"
			   />
			   <!-- 底部购买 -->
			    <view class="caty-aaticv">
			    	<van-goods-action>
				 	  <van-goods-action-icon icon="shop-o" text="店铺" color="#ff7714"/>
					  <van-goods-action-icon icon="cart-o" text="购物车" @click="onClickIcon"/>
			    	  <van-goods-action-icon icon="star-o" text="收藏" v-if="info.favorites == false" @click="onClickcollect" />
			    	  <van-goods-action-icon icon="star" color="#ff7144" text="收藏" v-else @click="cancelollect" />
			    	  <van-goods-action-button text="加入购物车" type="warning" @click="gouwu"/>
			    	  <van-goods-action-button text="立即购买" @click="onClickButton"/>
			    	</van-goods-action>
			    </view>
			  </view>
		  </view>
	</view>
</template>

<script>
	import Api from '@/http/api.js'
	export default{
		data(){
			return{
				goodsData:[],
				info:{},
				images:[],
				arr:[],
				akget:[],
				max:'',
				min:'',
				active:0,
				add:{
					commodityId:'',
					specId:'',
					holdUserId:'',
					number:Number
				},
				x:{
					commodityId:'',
					specId:'',
					initSpecNumber:''
				},
				list:{
					commodityId:'',
					specId:'',
					specName:'',
					specPrice:'',
					specNumber:''
				}
			}
		},
		onLoad(){
			this.loachied()
			// 提取商品详细
		},
	
		methods:{
			async loachied(){
				var pages = getCurrentPages();   //获取加载的页面
				
				var currentPage = pages[pages.length - 1];  //获取当前页面的对象

				let aa = currentPage.options.id //当前页面url的参数
				const res = await Api.merchan({commodityId:aa})
				this.info = res.data
				this.akget = JSON.parse(this.info.attributes[2].value)
				
				for(let i = 0; i < this.info.specs.length; i++){
					this.arr.push(this.info.specs[i].costPrice)
				}
				this.arr.sort(function (a, b) {
				  return a-b;
				}); 
				this.min = this.arr[0];  
				this.max = this.arr[this.arr.length - 1];
				this.add.number = 1
				// this.add.number = this.info.specs[this.active].number
				this.logxing()
			},
			// 提取商品详细
			logxing(){
				for(let i = 0;i<this.info.attributes.length;i++){
					if(this.info.attributes[i].name == "checkReportimg"){
						this.images = JSON.parse(this.info.attributes[i].value)
					}
				}
			},
			// 规格
			change(index){
				//把index值赋给active，点击改变样式
			this.active=index;
			this.loachied()
			},
			// 数量增加
	     async actehon(){
		     this.add.number = ++this.add.number
		     this.add.commodityId = this.info.commodityId
		     this.add.specId = this.info.specs[this.active].commoditySpecId
		     this.add.holdUserId = this.info.holdUserId
			 const res = await Api.addition(this.add)
	      },
		  // 数量减少
		  async formula(){
			  this.add.number = --this.add.number
			  this.add.commodityId = this.info.commodityId
			  this.add.specId = this.info.specs[this.active].commoditySpecId
			  this.add.holdUserId = this.info.holdUserId
			  const res = await Api.subtraction(this.add)
		  },
		  // 跳转购物车
		  onClickIcon(){
			  uni.navigateTo({
			  	url:'/pages/cart/cart'
			  })
		  },
		  // 加入购物车
		  async gouwu(){
		  	this.x.commodityId = this.info.commodityId
		  	this.x.specId = this.info.specs[this.active].commoditySpecId
			this.x.initSpecNumber = this.add.number
		  	const res = await Api.addshopping(this.x)
			if(res.code == 200){
				this.$api.msg('商品已添加至购物车');
			}
		  	this.loachied()
		  },
		  // 购买商品
		  onClickButton(){
			  this.goodsData = []
			  this.goodsData.push({'name':this.info.holdUserName,'commodities':[]})
			  this.goodsData[0].commodities.push({'commodityId':this.info.commodityId,'mainImages':this.info.mainImages,
			  'title':this.info.title,'commoditySpecs':{'specId':this.info.specs[this.active].commoditySpecId,
			  'number':this.add.number,'price':this.info.specs[this.active].costPrice,'specName':this.info.specs[this.active].name}})
			  uni.navigateTo({
			  url:`/package/payment/cherorder?data=${JSON.stringify(this.goodsData)}&type=ct`
			  })
		  },
		  // 收藏
		 async onClickcollect(){
			  this.list.commodityId = this.info.commodityId
			  this.list.specId = this.info.specs[this.active].commoditySpecId
			  this.list.specName = this.info.specs[this.active].name
			  this.list.specPrice = this.info.specs[this.active].platformPrice
			  const res = await Api.collection(this.list)
			  this.loachied();
		  },
		  // 取消收藏
		  async cancelollect(){
		  		const rect = await Api.canceltion({specId:this.info.specs[this.active].commoditySpecId,commodityId:this.info.commodityId})
		  		this.loachied();
		  }
		}
	}
</script>

<style lang="scss">
	.acticon{
		padding-bottom: 100px;
	}
	.home-swiper{
		height: 550rpx;
	}
	.activct{
		margin: 30upx;
	}
	.catu-cracon{
		font-size: 28rpx;
		color: #A4A4A4;
		font-weight: 500;
		margin-top: 15upx;
	}
	.cate-yosp{
		display: block;
		color: #ff7144;
		margin-top: 15upx;
		font-size: 41rpx;
		margin-bottom: 20upx;
	}
	.cate-acedc{
		display: inline-block;
		background-color: #ff7144;
		color: #fff;
		font-size: 36rpx;
		border-radius: 50upx;
		padding: 2upx 20upx;
		transform: translateX(10px);
	}
	.caty-caend{
		display: inline-block;
		font-size: 24upx !important;
		transform: translateY(-15%);
	}
	.van-button--small{
		border-radius: 15px;
		width: 100px;
	}
	.van-button--default{
		border-radius: 15px !important;
	}
	.cart-caecr{
		display: inline-block;
		margin-right: 28upx;
		margin-bottom: 20upx;
		flex: 3;
	}
   .active{
	   border: 1px solid #ff7144;
	   border-radius: 15px;
   }
   // 数量加减
   .caty-iconsn{
	   color: #A4A4A4;
	   font-size: 28rpx;
   }
   .caty-opster{
	   display: inline-block;
	   float: right;
	   margin-right: 30upx;
   }
   // 底部购物
    .caty-aaticv{
		width: 100%;
	}
	.van-goods-action{
		padding-bottom: 0 !important;
	}
	.van-button--active{
		background-color: #fff;
	}
	// 底部提示
	.caty-imgper{
		position: fixed;
		bottom: 55px; 
		left: 50upx;
		width: 50px;
		height: 15px;
		z-index: 999;
	}
	.caty-notice{
		text-align: center;
		position: fixed;
		bottom: 55px;
		left: 0;
		width: 100%;
		height: 25px;
	}
	.aminagester{
		width: 100%;
		margin-top: 30upx;
		margin-bottom:10rpx;
	}
	
</style>